<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-orientation" content="portrait" />
    <meta name="wap-font-scale" content="no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>添加收银员</title>
    <link rel="stylesheet" href="js/mui/css/mui.min.css"/>
    <link rel="stylesheet" href="css/cashier.css"/>
</head>
<body>
<div class="main-page">
    <header id="header" class="mui-bar mui-bar-nav">
        <a href="javascript:;" class="mui-btn mui-btn-link mui-action-back  mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-arrowleft"></span>返回
        </a>
        <h1 class="mui-title">收银员</h1>
        <a class="mui-btn mui-btn-link mui-btn-nav  mui-pull-right">
            <span class="add"></span>
        </a>
    </header>
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <!--数据列表-->
            <ul class="cashier-wrapper">
                <li class="cashier-item">
                   <p class="mui-ellipsis">1000</p>
                   <p class="shop mui-ellipsis">总店</p>
                   <div class="right "><span class="cashier-type mui-ellipsis">管理员</span></div>
                </li>
            </ul>
            <div class="add-more">点击或上拉加载更多</div>
             <div class="loading">
                 <div class="mui-pull">
                     <div class="mui-pull-loading mui-icon mui-spinner"></div>
                     <div class="mui-pull-caption mui-pull-caption-refresh">正在加载...</div>
                 </div>
             </div>
        </div>
    </div>
</div>
<script src="js/mui/js/mui.min.js"></script>
<script>
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                callback: pulldownRefresh
            },
            up: {
                height:100,//可选.默认50.触发上拉加载拖动距离
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }
    });
    /**
     * 下拉刷新具体业务实现
     */
    function pulldownRefresh() {
        setTimeout(function() {
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
        }, 1500);
    }
    /**
     * 上拉加载具体业务实现
     */
    var hasload=false;//判断是否正在加载
    function pullupRefresh() {
        hasload=true;
        setTimeout(function() {
            hasload=false
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(); //参数为true代表没有更多数据了。
        }, 10000);
    }
    mui("#pullrefresh").on("tap",".add-more",function () {
       var load=document.querySelector(".loading");
       if(!hasload){
           if(load){
               load.setAttribute("class","loading mui-visibility");
           }
           hasload=true;
           setTimeout(function() {
               if(load){
                   load.setAttribute("class","loading");
                   hasload=false
               }
           }, 10000);
       }

    });
    var xd="dddddddddddd";
    var x=JSON.parse(xd)
    console.log(x)
</script>
</body>
</html>